<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>用户管理</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<link rel="stylesheet" href="${demoPath}static/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${demoPath}static/assets/css/font-awesome.min.css" />
		<link rel="stylesheet" href="${demoPath}static/assets/css/jquery-ui-1.10.3.full.min.css" />
		<link rel="stylesheet" href="${demoPath}static/assets/css/datepicker.css" />
		<link rel="stylesheet" href="${demoPath}static/assets/css/ui.jqgrid.css" />
		<link rel="stylesheet" href="${demoPath}static/assets/css/ace.min.css" />
		<link rel="stylesheet" href="${demoPath}static/assets/css/ace-rtl.min.css" />
		<link rel="stylesheet" href="${demoPath}static/assets/css/ace-skins.min.css" />
		<script src="${demoPath}static/assets/js/ace-extra.min.js"></script>
		
		<link rel="stylesheet" type="text/css" media="screen" href="${demoPath}static/plugs/validform/css/style.css" />
		
	</head>

	<body>

		<div class="main-container" id="main-container">
			<table id="grid-table"></table>
			<div id="grid-pager"></div>
		</div>

		<script src="${demoPath}static/assets/js/jquery.mobile.custom.min.js"></script>
		<script src="${demoPath}static/assets/js/jquery-2.0.3.min.js"></script>
		<script src="${demoPath}static/assets/js/bootstrap.min.js"></script>
		<script src="${demoPath}static/assets/js/typeahead-bs2.min.js"></script>
		<script src="${demoPath}static/assets/js/date-time/bootstrap-datepicker.min.js"></script>
		<script src="${demoPath}static/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
		<script src="${demoPath}static/assets/js/jqGrid/i18n/grid.locale-en.js"></script>
		<script src="${demoPath}static/assets/js/ace-elements.min.js"></script>
		<script src="${demoPath}static/assets/js/ace.min.js"></script>

		
		<script type="text/javascript" src="${demoPath}static/js/myValidForm.js"></script>
	
		<script type="text/javascript">
			jQuery(function($) {
				var grid_selector = "#grid-table";
				var pager_selector = "#grid-pager";
			
				jQuery(grid_selector).jqGrid({
					url: 'allUserList',
					datatype: "json",
					height: 395,
					colNames:[' ', 'ID','名称','账号','状态','性别','手机','邮箱','描述'],
					colModel:[
						{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
							formatter:'actions', 
							formatoptions:{ 
								keys:true,
								delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
							}
						},
						{name:'id',index:'id', width:40, sorttype:"int", editable: false,hidden:true},
						{
							name:'name',
							index:'name',
							width:40,
							sorttype:"String",
							editable:true,//开启编辑
							editoptions: {required: true,size:30,maxlength:30},
							editrules:{
								custom:true,//开启自定义查询
								custom_func:function(value,colName){
							    	return mc_expression(value,colName,"value.length>=4&&value.length<30","长度必须在4-30个字节长度！");
								}
							},
							search:true,//开启查询
							searchoptions:{
								sopt:['eq','bw','bn','ew','en','cn','nc']
							},
						},
						{
							name:'account',
							index:'account', 
							width:40,
							editable:true,
							editoptions:{required:true,size:"30",maxlength:"30"},
							editrules:{
								custom:true,
								custom_func:function(value,colName){
									return mc_expression(value,colName,"value.length>=4&&value.length<30","长度必须在4-30个字节长度！");
								}
							}
						},
						{name:'state',index:'state', width:20,editable:true,edittype:"select",formatter:"select",editoptions: {value:'0:禁用;1:启用'}},
						{name:'sex',index:'sex', width:20, editable:true,edittype:"select",formatter:"select",editoptions: {value:'0:待定;1:男;2:女'}},
						{name:'mobile',index:'mobile', width:30, sortable:false,editable:true,editrules:{custom:true, custom_func:mc_telcheck}},
						{name:'email',index:'email', width:30, sortable:false,editable:true,editrules:{email:true}},
						{name:'description',index:'description', width:100, sortable:false,editable:true} 
					], 
			
					viewrecords : true,//是否在浏览导航栏显示记录总数
					emptyrecords:"<span color='red'>没有符合条件的记录</span>",
					rowNum:10,
					rowList:[10,20,30],
					pager : pager_selector,//定义分页浏览导航条。必须是一个HTML元素
					altRows: true,//设置为交替行表格
					//toppager: true,//是否在表格上部显示分页条。
					multiselect: true,//此属性设为true时启用多行选择，出现复选框
					//multikey: "ctrlKey",//此属性只有当multiselect为true时有效，定义多选时的组合键，可选值有： shiftKey ，altKey，ctrlKey
			        multiboxonly: true,//此属性只有当multiselect为true时有效，. Multiboxonly设置为true时，只有点击checkbox时该行才被选中，点击其他列，将清除当前行的选中
					contentType: "application/x-www-form-urlencoded;charset=utf-8",
					editurl: "saveUser",//定义行内编辑地址URL
					caption: "用户管理",//表格的标题。显示在Header上。若为空时将不会显示。
					autowidth: true,//当设置为true时，表格宽度将自动匹配到父元素的宽度。这个匹配只在表格建立时进行，为了使表格在父元素宽度变化时也随之变化，可以使用setGridWidth方法
					loadonce:true,//如果为ture则数据只从服务器端抓取一次，之后所有操作都是在客户端执行，翻页功能会被禁用
					loadui:"enable",//当执行ajax请求时要干什么。disable禁用ajax执行提示；enable默认，当执行ajax请求时的提示； block启用Loading提示，但是阻止其他操作
					userData:"userData",
					
					jsonReader:{
						 root: "dataList",
						 page: "page",
						 total: "total",
						 records: "records",
						 userdata: "userData",
						 repeatitems: false
					},
                    loadComplete : function() {
						var table = this;
						setTimeout(function(){
							styleCheckbox(table);
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					},
					loadError : function(xhr,status,error){
						alert("system error!"+error);
					}
					
					
				    
				});
			
				//enable search/filter toolbar
				//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true});
			
				//enable datepicker
				/*
				function pickDate( cellvalue, options, cell ) {
					setTimeout(function(){
						$(cell) .find('input[type=text]')
								.datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
					}, 0);
				}
				*/
			
				//navButtons
				jQuery(grid_selector).jqGrid('navGrid',pager_selector,
					{ 	//navbar options
						edit: true,
						editicon : 'icon-pencil blue',
						add: true,
						addicon : 'icon-plus-sign purple',
						del: true,
						delicon : 'icon-trash red',
						search: true,
						searchicon : 'icon-search orange',
						refresh: true,
						refreshicon : 'icon-refresh green',
						view: true,
						viewicon : 'icon-zoom-in grey',
					},
					{
						//edit record form
						//closeAfterEdit: true,
						width: 600, 
						recreateForm: true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
							style_edit_form(form);
							
						}
					},
					{
						//new record form
						closeAfterAdd: true,
						recreateForm: true,
						viewPagerButtons: false,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
							style_edit_form(form);
						}
					},
					{
						//delete record form
						recreateForm: true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							if(form.data('styled')) return false;
							
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
							style_delete_form(form);
							
							form.data('styled', true);
						},
						onClick : function(e) {
							alert(1);
						}
					},
					{
						//search form
						recreateForm: true,
						afterShowSearch: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />');
							style_search_form(form);
						},
						afterRedraw: function(){
							style_search_filters($(this));
						}
						,
						multipleSearch: true,
						//multipleGroup:true,
						//showQuery: true
					},
					{
						//view record form
						recreateForm: true,
						beforeShowForm: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />');
						}
					}
				);
			
			
				
				function style_edit_form(form) {
				
					//enable datepicker on "sdate" field and switches for "stock" field
					form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
						.end().find('input[name=stock]')
							  .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
			
					//update buttons classes
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
					buttons.eq(1).prepend('<i class="icon-remove"></i>');
					
					buttons = form.next().find('.navButton a');
					buttons.find('.ui-icon').remove();
					buttons.eq(0).append('<i class="icon-chevron-left"></i>');
					buttons.eq(1).append('<i class="icon-chevron-right"></i>');		
					
				}
			
				function style_delete_form(form) {
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
					buttons.eq(1).prepend('<i class="icon-remove"></i>');
				}
				
				function style_search_filters(form) {
					form.find('.delete-rule').val('X');
					form.find('.add-rule').addClass('btn btn-xs btn-primary');
					form.find('.add-group').addClass('btn btn-xs btn-success');
					form.find('.delete-group').addClass('btn btn-xs btn-danger');
				}
				function style_search_form(form) {
					var dialog = form.closest('.ui-jqdialog');
					var buttons = dialog.find('.EditTable');
					buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
					buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
					buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
				}
				
				function beforeDeleteCallback(e) {
					var form = $(e[0]);
					if(form.data('styled')) return false;
					
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
					style_delete_form(form);
					
					form.data('styled', true);
				}
				
				function beforeEditCallback(e) {
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
					style_edit_form(form);
				}
			
			
			
				//it causes some flicker when reloading or navigating grid
				//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
				//or go back to default browser checkbox styles for the grid
				function styleCheckbox(table) {
				/***/
					$(table).find('input:checkbox').addClass('ace')
					.wrap('<label />')
					.after('<span class="lbl align-top" />');
			
			
					$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
					.find('input.cbox[type=checkbox]').addClass('ace')
					.wrap('<label />').after('<span class="lbl align-top" />');
				
				}
				
			
				//unlike navButtons icons, action icons in rows seem to be hard-coded
				//you can change them like this in here if you want
				function updateActionIcons(table) {
					/**
					var replacement = 
					{
						'ui-icon-pencil' : 'icon-pencil blue',
						'ui-icon-trash' : 'icon-trash red',
						'ui-icon-disk' : 'icon-ok green',
						'ui-icon-cancel' : 'icon-remove red'
					};
					$(table).find('.ui-pg-div span.ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
					*/
				}
				
				//replace icons with FontAwesome icons like above
				function updatePagerIcons(table) {
					var replacement = 
					{
						'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
						'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
						'ui-icon-seek-next' : 'icon-angle-right bigger-140',
						'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
					};
					$('.ui-pg-table:not(.ui-pg-tablenavtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					});
				}
			
				function enableTooltips(table) {
					$('.navtable .ui-pg-button').tooltip({container:'body'});
					$(table).find('.ui-pg-div').tooltip({container:'body'});
				}
				//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
			
			});
		</script>
	</body>
</html>
